<template>
    <div class="my-tabs" >
        <div v-for="it in tabs"
        :class="['item',it.act && 'act']" 
        @click="toPage(it)"
        :key="it.txt">
            <i :class="['iconfont', it.icon ]" ></i>
            <span>{{ it.txt }}</span>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, Ref } from "vue";
import { useRoute, useRouter } from "vue-router";
let tabs:Ref<Array<MyTabs>> = ref([])
const router = useRouter()
const route = useRoute()
    tabs.value = [
        {txt:'首页',path:'/home',act:true,icon:'icon-home'},
        {txt:'分类',path:'/type',act:false,icon:'icon-menu-application'},
        {txt:'购物车',path:'/cart',act:false,icon:'icon-cart'},
        {txt:'我的',path:'/mine',act:false,icon:'icon-user'}
    ].map((it:MyTabs)=>{
        it.act = it.path === route.path
        return it
    })
if(route.path === '/'){
    tabs.value[0].act = true
}

/** 路由跳转 */ 
function toPage(it:MyTabs){
    router.push(it.path)
    tabs.value = tabs.value.map((oo:MyTabs)=>{
        oo.act = it.path === oo.path
        return oo
    })
}

</script>

<style lang="less" scoped>
@import url('../style/comon.less');
@h:50px;
.my-tabs{
    width: 100%;
    height: 8vh;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    position: fixed;
    bottom: 0px;
    left: 0;
    border-top: 1px solid @bor;
    padding: .5rem 0px;
    background-color: #fffbfb;
    color: #858585;
    .item{
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        &.act{
            color: @g7;
            font-weight: bold;
        }
        span{
            font-size: .6rem;
            text-align: center;
        }
        i{
            font-size: 1.2rem;
            margin-bottom: 4px;
            font-weight: 400;
        }
    }
}
</style>